
<template>
  <li :class="{complete:todo.completed}">
    <!--这里直接使用了 v-model 绑定到 todo 上， 修改属性的值-->
    <el-checkbox v-model="todo.completed"></el-checkbox>
    <span>{{todo.value}}</span>
    <el-tooltip class="item" effect="dark" content="点击删除" placement="left">
      <i class="el-icon-close" @click="removeTodo(index)"></i>
    </el-tooltip>

  </li>
</template>

<script text="text/javascript">
/**
Vue 组件的 API 来自三部分 - props, events 和 slots ：
  Props 允许外部环境传递数据给组件
  Events 允许组件触发外部环境的副作用
  Slots 允许外部环境将额外的内容组合在组件中。
  使用 v-bind 和 v-on 的简写语法，模板的缩进清楚且简洁：
*/
export default{
  name: 'todo-item',
  props: ['todo', 'todos', 'index'], // 允许外部环境传递数据给组件
  methods:{
    removeTodo(index){
      // javascript  confirm 做法
      // if(!this.todo.completed){
      //   if(!confirm('该条尚未完成，确认删除？')){
      //     return false;
      //   }
      // }
      // 使用 element-ui 的 messageBox 组件实现
      if(!this.todo.completed){
        this.$msgbox({
          title: '友情提示',
          message: '该任务尚未完成，是否确认删除？',
          showCancelButton: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            console.log(action)
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';

              this.todos.splice(this.todos.indexOf(this.todo), 1)

              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 1000);

            } else {
              done();
            }
          }
        })
        // .then(action => {
        //   this.$message({
        //     type: 'info',
        //     message: 'action: ' + action
        //   });
        // });
      }else{
        this.todos.splice(this.todos.indexOf(this.todo), 1)
      }

      // 不能写成 this.todos = this.todos.splice(this.todos.indexOf(this.todo), 1)
    }
  }
}
</script>

<style>
span{
        font-size: 22px;
        line-height: 22px;
    }
    i{
        float: right;
        margin-right: 15px;
        line-height: 22px;
        font-size: 12px;
        color: #F7BA2A;
    }
    span{
        margin-left: 10px;
    }
    li.complete{
        span{
            text-decoration: line-through;
            color:#ddd;
        }
    }
     li{
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        cursor: pointer;
     }
     i{
         display: none;
         opacity: 0.5;
     }
     i:hover{
         opacity: 1;
     }

     li:hover i{
         display: block;
     }

</style>
